<template>
  <div id="wrap">

    <eform :dialogVisible=dialogVisible :formConfig=formConfig @onSubmit="onSubmit" @cancel="cancel"></eform>
    <div id="box0"></div>
    <div id="box1">
      <etab :tabConfig=tabConfig @del="del"></etab>
    </div>
    
    <div id="box2">
      <btn :btnData=btnGroup.btnData @btnClick="btnClick"  id="btn"></btn>
    </div>
  </div>
</template>

<script>
import btn from './components/btn'
import etab from './components/tab'
import eform from './components/form'
import { btnMixin, tabMixin, formMixin} from './mixins'
export default {
  data() {
    return {
      sign: true
    }
  },
  mixins: [btnMixin, tabMixin, formMixin],
  components: {
    btn,
    etab,
    eform
  },
  methods: {
    indexMethod(index) {
      return index * 2;
    },
     
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    onSubmit(arr) {
      let obj = {}
      arr.forEach(res => {
        obj[res._name] = res.value
        res.value = ""
      })
      this.tabConfig.tableData.push(obj)
      this.dialogVisible = false
    },
    del(info){
      this.tabConfig.tableData.splice(info.$index,1)
    },
    btnClick(info){
      this.btnGroup.btnMethods[info].bind(this)()
    },
    onSubmit(info){
      let obj = {}
      info.forEach(res => {
        if(!res.value){
          this.sign = false
        }
        obj[res._name] = res.value
        res.value = ""
      })
      if(this.sign){
        this.tabConfig.tableData.push(obj)
      }
      this.dialogVisible.sign = false
      this.sign = true
    },
    cancel(){  
      this.dialogVisible.sign = false
    }
  }
};
</script>

<style scoped>
#wrap{

}
#box0{
  height: 16px;
}
#box1{
  margin-left: 16px;
}
#box2{
  margin-top: 16px;
  margin-left: 16px;
}

</style>
